<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/input-image-upload.css">

</head>
<body>

<jsp:include page="${APP_PATH}/common/head-mine.jsp"/>
<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <div class="my-2 p-3 rounded bg-white">
        <%--头像--%>
        <div id="userView" data-userId="${userView.id}" class="container">
            <span><i class="fa fa-image"></i>头像：</span>
            <div id style="clear: both"></div>
            <%--头像为空判断--%>
            <c:choose>
                <c:when test="${not empty userView.headimgurl}">
                    <%--用户头像不为空，直接显示--%>
                    <img id="headImg" class="float-left rounded-circle" src="${userView.headimgurl}"
                         style="object-fit: cover;width: 80px;height:80px;" alt="img">
                </c:when>
                <c:otherwise>
                    <%--用户头像为空--%>
                    <span>该用户未上传头像</span>
                </c:otherwise>
            </c:choose>
            <div style="clear: both"></div>
        </div>

        <%--昵称--%>
        <div class="container ml-0 mt-2 pl-0">
            <span><i class="fa fa-smile"></i>昵称：${userView.nickname}</span>
        </div>

        <%--邮箱--%>
        <div class="container ml-0 mt-2 pl-0">
            <span><i class="fa fa-magic"></i>邮箱：${userView.email}</span>
        </div>

        <%--性别--%>
        <div class="container ml-0 mt-2 pl-0">
            <span><i class="fa fa-bath"></i>性别：${userView.gender}</span>
        </div>

        <%--个性签名--%>
        <div class="container ml-0 mt-2 pl-0">
            <span><i class="fa fa-signature"></i>签名：${userView.slogan}</span>
        </div>
    </div>

    <div class="my-2 p-3 rounded bg-white">
        <div class="border-bottom border-dark">
            <strong>Ta的所有文章</strong>
        </div>
        <div id="blogs"></div>
    </div>

    <div id="pagenav"></div>
</div>


<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>
<script>
    //过滤html标签
    function delHtmlTag(str) {
        return str.replace(/<[^>]+>/g, "");//去掉所有的html标记
    }

    function buildPage(result) {
        $("#blogs").empty();
        $.each(result.extend.pageInfo.list, function (index, item) {
            var $div_out = $("<div data-blogId='" + item.id + "' class='border-bottom border-secondary pt-3 pl-3' style='position: relative'>");
            if (item.top === 1) {
                //置顶图标
                $div_out = $("<div data-blogId='" + item.id + "' class='border-bottom border-secondary pt-3 pl-3' style='position: relative'>").append("<img src='/images/setTop_left.svg' style='position: absolute;left: 0;top:0;' width='40px' height='40px'>");
            }
            //标题
            var $h5 = $("<h5 class='font-weight-bold border-bottom border-light'>").append($("<a class='text-dark' href='/blog/" + item.id + "'>").append(item.blogtitle));
            //内容
            var $div_center = $("<div>");
            //内容截取并过滤html标签
            var content = item.blogcontent;
            content = delHtmlTag(content);
            content = content.substr(0, 200);
            var $div_content = $("<div style='position:relative;word-wrap: break-word;'>").append(content);
            var $div_inner = $("<div>");
            //底部信息条
            var $span1 = $("<span class='text-sm-left text-secondary'>").append(new Date(item.edittime).toLocaleString());
            var $span2 = $("<span class='text-sm-left text-success ml-2'>").append($("<i class='fa fa-arrow-up'>")).append(item.upvotenum);
            var $span3 = $("<span class='text-sm-left text-danger ml-2'>").append($("<i class='fa fa-arrow-down'>")).append(item.downvotenum);
            var $div_right_span = $("<div style='position:absolute;right:4px;bottom:4px' ></div>").append($span2).append($span3);
            $div_out.append($h5).append($div_center.append($div_content).append($div_inner.append($span1)).append($div_right_span)).appendTo($("#blogs"));
        });
    }

    function buildPage_pageNav(result) {
        //分页导航条
        $("#pagenav").empty();
        var ul = $("<ul></ul>").addClass("pagination");

        //遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {

            var numLi = $("<li class='page-item'></li>").append($("<a class='btn btn-sm btn-outline-primary mr-2'></a>").append(item));
            if (result.extend.pageInfo.pageNum === item) {
                //当前页按钮，不可点击
                numLi.find("a").removeClass("btn-outline-primary");
                numLi.find("a").addClass("disabled");
                numLi.find("a").addClass("btn-primary");
            }
            numLi.click(function () {
                toPage(item);
            });
            ul.append(numLi);
        });
        ul.appendTo($("#pagenav"));
    }

    function toPage(pn) {
        var userId = $("#userView").attr("data-userId");
        if (userId) {
            $.ajax({
                url: '/getBlogsByUserId',
                data: {userId: userId, pn: pn},
                type: 'POST',
                success: function (result) {
                    if (result.code === 100) {
                        //判断是否为空
                        if (result.extend.pageInfo.list.length > 0) {
                            //开始解析
                            buildPage(result);
                            buildPage_pageNav(result);
                        }
                    } else {
                        //获取数据失败
                        toastr.error("获取数据失败！");
                    }
                }
            });
        }
    }

    $(function () {
        toPage(1);
    });
</script>
</body>
</html>
